<template>
  <div id="be">
    <div id="MyWX" v-show="isShow"><img :src="require('../assets/xjkWX.png')" alt=""></div>
    <a href="http://www.beian.gov.cn/portal/registerSystemInfo">
      <div class="beian-img-box">
        <img src="https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png" alt="">
      </div>
      <span class="beian">湘ICP备 2021011335号</span>
    </a>
    <div id="contact">
      <contact-me @openDiv="openD" @closeDiv="closeD"></contact-me>
    </div>
  </div>
</template>

<script>
import ContactMe from '@/components/contact-me/Contact-me'

export default {
  name: 'ICP',
  components: { ContactMe },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    openD () {
      console.log('---1---')
      this.isShow = true
    },
    closeD () {
      console.log('--2--')
      this.isShow = false
    }
  }

}
</script>

<style scoped lang="scss">
#be {
  color: white;
  font-size: 13px;
  background-color: #1a1919;

  .beian-img-box {
    width: 20px;
    height: 20px;
    display: inline-block;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

#contact {
  float: right;
  display: inline-block;
}

a:link, a:visited {
  color: white;
}

#MyWX {
  position: fixed;
  bottom: 10em;
  right: 10em;
  z-index: 10;
  width: 20em;
  height: 20em;
  img{
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 500px){
  #MyWX{
    position: fixed;
    bottom: 10em;
    right: 6em;
    z-index: 10;
    width: 11em;
    height: 11em;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
